<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('摄像头识别')" />
</head>
<body class="gray-bg">
     <div class="container-div">
        <div class="row">
            <div class="col-sm-12 search-collapse">

                <div>
                    <input id="play" type="button"class="btn btn-w-m btn-primary"  style="font-size:37px" value="开始播放"/>
                    <input id="pause" type="button" class="btn btn-w-m btn-success" style="font-size:37px" value="暂停播放"/>
                    <input id="continue" type="button" class="btn btn-w-m btn-warning" style="font-size:37px" value="继续播放"/>
                    <input id="stop" type="button" class="btn btn-w-m btn-danger" style="font-size:37px" value="停止播放"/>
                    <input id="capture" type="button" class="btn btn-w-m btn-success"  style="font-size:37px" value="智能分析"/>
                    <input id="capture2" type="button" value="智能分析"style="display:none"/>
                    <label for="slider">阈值</label>
                    <input type="range" id="slider" name="slider" min="0" class="btn btn-w-m btn-success"  max="100" style="width:200px; display: inline;" value="70" oninput="updateSliderValue(this.value)">
                    <span id="sliderValue">70</span>
                    <br/>




                    <div style="margin-top:5px">
                        <video id="testVideo" style="background-color:#000;width:600px!important;height:300px !important"></video>
                        &nbsp;
                        <canvas id="testCanvas" style="background-color:#000;width:600px;height:300px;"></canvas>

                    </div>
                </div>
            </div>


        </div>
    </div>
    <th:block th:include="include :: footer" />
    <script th:inline="javascript">
        var editFlag = [[${@permission.hasPermi('AI:cameraB:edit')}]];
        var removeFlag = [[${@permission.hasPermi('AI:cameraB:remove')}]];
        var prefix = ctx + "AI/cameraB";

        $(function() {
            var options = {
                url: prefix + "/list",
                createUrl: prefix + "/add",
                updateUrl: prefix + "/edit/{id}",
                removeUrl: prefix + "/remove",
                exportUrl: prefix + "/export",
                exportUrl: prefix + "/indexsimple",
                modalName: "摄像头识别",
                columns: [{
                    checkbox: true
                },
                {
                    field: 'id',
                    title: '主键',
                    visible: false
                },
                {
                    field: 'materialName',
                    title: '物料名称'
                },
                {
                    field: 'photoLocation',
                    title: '图片位置'
                },
                {
                    field: 'amount',
                    title: '数量'
                },
                {
                    field: 'rate',
                    title: '识别率'
                },
                {
                    field: 'saveDate',
                    title: '保存时间'
                },
                {
                    field: 'operator',
                    title: '操作人员'
                },
                {
                    title: '操作',
                    align: 'center',
                    formatter: function(value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="$.operate.edit(\'' + row.id + '\')"><i class="fa fa-edit"></i>编辑</a> ');
                        actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.id + '\')"><i class="fa fa-remove"></i>删除</a>');
                        return actions.join('');
                    }
                }]
            };
            $.table.init(options);
        });

        var player = null;
        var canvas = document.getElementById('testCanvas');
        var video = document.getElementById('testVideo');
        document.getElementById('stop').onclick = function(){
            player && player.close();
        }
        document.getElementById('pause').onclick = function(){
            player && player.pause();
        }
        document.getElementById('continue').onclick = function(){
            player && player.play();
        }

        document.getElementById('capture').onclick = function(){
            //player && player.capture();//capture()是用来下载图片的，本项目中不用
            player;
            canvas.width = video.videoWidth;
            canvas.height = video.videoHeight;
            var context = canvas.getContext('2d');
            context.drawImage(video, 0, 0, canvas.width, canvas.height);
            // 获取base64编码的图片数据，0.5代表压缩率，只能使用image/jpeg，不能使用impage/png
            var photo = canvas.toDataURL("image/jpeg", 0.3) ;
            var rangeInput = document.getElementById('slider');
            // 获取当前值
            var rate = rangeInput.valueAsNumber;
            $.operate.save(prefix + "/add", {"photo":photo,"rate":rate}, function(res){
                console.log(res)
                if(res.code == 0){
                    if(res.hasOwnProperty("data")){
                        const data = res.data;
                        const name = data.name;
                        const score = data.score;
                        const location = data?.location;
                        const height = location?.height;
                        const width = location?.width;
                        const  left = location?.left;
                        const top = location?.top;
                        context.strokeStyle = "red"; // 设置边框颜色为红色
                        context.lineWidth = 7; // 设置线条宽度为1像素
                        context.rect(left, top, width, height); // 定义矩形位置及大小
                        context.stroke(); // 绘制矩形边框
                        context.font = "bold 60px Arial";//粗体 字号 字体
                        context.fillStyle ="red";//文字颜色：默认黑色
                        context.fillText(name+" :["+score.toFixed(4) +"]",left,top-18)
                    }
                }
                //const code = res["code"];
                //const msg = JSON.parse(res["msg"]);
                /**

                 {"msg":"{\"error_code\":336005,\"error_msg\":\"Failed decoding input\",\"log_id\":4745776126151902448}","code":0}*
                 */
                /*


                if(msg["error_code"] === 336005){
                    debugger
                    alert("请截取图片")
                    return;
                }
                if (code === 0 && typeof( msg["results"][0]?.name) !== 'undefined'){
debugger
                    const name = msg["results"][0]?.name;
                    const score = msg["results"][0]?.score;
                    const location = msg["results"][0]?.location;
                    const height = location?.height;
                    const width = location?.width;
                    const  left = location?.left;
                    const top = location?.top;
                    context.strokeStyle = "red"; // 设置边框颜色为红色
                    context.lineWidth = 7; // 设置线条宽度为1像素
                    context.rect(left, top, width, height); // 定义矩形位置及大小
                    context.stroke(); // 绘制矩形边框
                    context.font = "bold 60px Arial";//粗体 字号 字体
                    context.fillStyle ="red";//文字颜色：默认黑色
                    context.fillText(name+"（"+score.toFixed(4) +"）",left,top-18)
                }else{
                    alert("请调整物品位置 ");
                }
                */


            });







        }
		document.getElementById('capture2').onclick = function(){
            player && player.capture2();
        }
        /**
        *此处用于修改摄像头IP地址
         */
        document.getElementById('play').onclick = function(){
            var options = {
                wsURL: 'ws://192.168.33.108/rtspoverwebsocket',
                rtspURL: 'rtsp://192.168.33.108/cam/realmonitor?channel=1&subtype=0&proto=Private3',
                username: 'admin',
                password: 'admin123'
            };
            player = new PlayerControl(options);
            player.on('WorkerReady', function(){
                player.connect();
            });
            player.on('DecodeStart', function(rs){
                console.log('开始解码');
                console.log(rs);

            });
            player.on('PlayStart', function(rs){
                console.log('开始播放');
                console.log(rs);
            });
            player.on('Error', function(rs){
                console.log('发生错误');
                console.log(rs);
            });
            player.on('FileOver', function(rs){
                console.log('回放播放完成');
                console.log(rs);
            });
            player.on('MSEResolutionChanged', function(rs){
                console.log('分辨率改变');
                console.log(rs);
            });
            player.on('FrameTypeChange', function(rs){
                console.log('编码模式改变');
                console.log(rs);
            });
            player.on('audioChange', function(rs){
                console.log('音频编码改变');
                console.log(rs);
            });
            player.init(canvas, video);
        }
        document.getElementById('capture2').click();
        function updateSliderValue(value) {
            document.getElementById("sliderValue").innerText = value;
        }
    </script>
</body>

</html>